<script setup lang="ts">
import axios from 'axios'
import { ChannelItem, ChannelResData } from '../types/data'
import { onMounted, ref } from 'vue'

import { useChannelStore } from '../store/channel'
import { storeToRefs } from 'pinia'

const store = useChannelStore()

const { channelId } = storeToRefs(store)

defineProps<{
  test: string
}>()

const emit = defineEmits<{
  (e: 'update:test', value: string): void
}>()

const channelNavList = ref<ChannelItem[]>([])

const changeTest = (value: string) => {
  emit('update:test', value)
}

onMounted(async () => {
  const { data: res } = await axios.get<ChannelResData>(
    'http://geek.itheima.net/v1_0/channels'
  )

  console.log(res)

  channelNavList.value = res.data.channels
})
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: item.id === channelId }"
        href="javascript:;"
        v-for="item in channelNavList"
        :key="item.id"
        @click="store.updateChannelId(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>

  <h2>{{ test }}</h2>

  <button @click="changeTest('9住13')">测试</button>
</template>
